<template>
  <div class="home-container" :class="className && 'noImgBg'">
    <div class="left-container" v-if="leftShow">
      <el-tree :data="list" @node-click="handleNodeClick"></el-tree>
    </div>
    <div class="main-container" v-if="data">
      <div class="main-item" v-for="(item, index) in data" :key="index">
        <div v-if="item.type === 'system'">
          <p
            v-for="ite in item.value"
            :key="ite"
            class="system"
            @click="systemShow = true"
          >{{ ite }}</p>
        </div>
        <p v-if="!item.type">{{ item.label }}：{{ item.value || '-' }}</p>
      </div>
    </div>
    <!-- 设备图片 -->
    <div class="img-container" v-if="className">
      <img src="~static/images/SUN.jpg" alt v-if="className === 'SUNPOWER'" />
      <img src="~static/images/MAINS.png" alt v-if="className === 'MAINSPOWER'" />
      <img src="~static/images/STORAGE.png" alt v-if="className === 'STORAGEPOWER'" />
      <img src="~static/images/AIRSOURCE.jpg" alt v-if="className === 'AIRSOURCE'" />
      <img src="~static/images/FUELBOILER.png" alt v-if="className === 'FUELBOILER'" />
      <img src="~static/images/SHALLOWLAND.jpg" alt v-if="className === 'SHALLOWLAND'" />
      <img src="~static/images/STORAGEHEAT.jpg" alt v-if="className === 'STORAGEHEAT'" />
      <img src="~static/images/MUNICIPALHEAT.jpg" alt v-if="className === 'MUNICIPALHEAT'" />
    </div>
    <!-- 第三方系统弹出 -->
    <el-dialog title="外部系统" center :visible.sync="systemShow" width="600px">
      <span>数据待接入</span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      leftShow: false,
      list: [],
      data: null,
      className: null,
      systemShow: false
    };
  },
  // 请求左侧列表
  async mounted() {
    // 获取左侧
    let result1 = await this.$fetchGet("/common/findAllPowerEnum");
    result1 = result1.result
    Object.keys(result1).forEach(keys => {
      if (keys === "userPower") {
        // 用能侧
        this.list[0] = {
          label: "用能侧",
          value: keys,
          level: 1,
          children: []
        };
        result1[keys].forEach(item => {
          this.list[0].children.push({
            label: item.name,
            value: item.code,
            level: 2
          })
        })
      } else {
        this.list[1] = {
          label: "供能侧",
          value: keys,
          level: 1,
          children: []
        };
        result1[keys].forEach(item => {
          this.list[1].children.push({
            label: item.name,
            value: item.code,
            level: 2
          })
        })
      }
    });
    // 获取数据
    let result2 = await this.$fetchGet('/power/findPowerTop1')
    result2 = result2.result
    console.log(result2)
    Object.keys(result2).forEach(key => {
      console.log(key)
      const num = key === 'userPower' ? 0 : 1
      this.list[num].children.forEach(item => {
        result2[key][item.value] && this.mappingRelations(result2[key][item.value], item, key)
      })
    })
    this.leftShow = true;
  },
  methods: {
    mappingRelations (item, data, key) {
      const obj = {
        SUNPOWER: { // 分布式太阳能
          powerLoadStr: '功率',
          powerGenerationStr: '发电量',
          changePercentStr: '转化率'
        },
        MAINSPOWER: { // 市电供电
          supplyPowerStr: '供电量',
          supplyPowerLoadStr: '功率'
        },
        STORAGEPOWER: { // 储电设备
          storageSupplyPowerStr: '充电量',
          freePowerStr: '放电量',
          capacityStr: '容量',
          powerLoadStr: '功率'
        },
        AIRSOURCE: { // 空气源热泵 
          airSupplycoolLoadStr: '制冷量',
          consumePowerStr: '耗电量',
          airSupplycoolStr: '供冷量',
          copStr: 'cop'
        },
        FUELBOILER: { // 燃气锅炉
          supplyHeatLoadStr: '制热量',
          supplyAirStr: '耗气量',
          supplyHeatStr: '供热量'
        },
        SHALLOWLAND: { // 浅层地源热泵
          supplycoolStr: '供冷量',
          supplyHeatLoadStr: '制热量',
          consumePowerStr: '耗电量',
          supplycoolLoadStr: '制冷量',
          supplyHeatStr: '供热量',
          copStr: 'cop'
        },
        STORAGEHEAT: { // 储热设备
          powerLoadStr: '功率',
          storagePowerStr: '储热量',
          supplyPowerStr: '供热量',
          capacityStr: '容量'
        },
        MUNICIPALHEAT: { // 市政供热
          munSupplyHeatStr: '供热量',
          supplyHeatLoadStr: '输热量',
          consumeWaterTempStr: '回水温度',
          supplyWaterTempStr: '供水温度'
        }
      }
      const arr = {
        // 用能端
        buildingStr: '建筑面积',
        heatingStr: '采暖面积',

        coolingLoadLoadStr: '冷负荷',
        heatLoadLoadStr: '热负荷',
        electricLoadLoadStr: '电负荷',

        coolingLoadStr: '用冷量',
        electricLoadStr: '用电量',
        heatLoadStr: '用热量'
      }
      // 状态 供能侧
      const status = {
        STORAGEHEAT: '储热',
        SUPPLYHEAT: '供热',
        CLOSE: '关闭',
        CHARGING: '充电',
        DISCHARGE: '放电',
        OPEN: '开启'
      }
      // 系统跳转
      const systemArr = {
        MAINSPOWER: ['电力监控系统', '电能管理系统'],
        SUNPOWER: ['太阳能发电监控系统'],
        STORAGEPOWER: ['蓄电池监控系统'],
        AIRSOURCE: ['空气源热泵动态监控系统'],
        SHALLOWLAND: ['浅层地源热泵智能监控系统'],
        FUELBOILER: ['燃气锅炉智能监控系统', '烟气在线监测系统'],
        STORAGEHEAT: ['储热设备远程监控系统'],
        MUNICIPALHEAT: ['换热站智能监控系统']
      }
      data.data = []
      if (item['status']) {
        data.data.push({
          label: '状态',
          value: status[item['status']]
        })
      }
      if (key === 'supplyPower') {
        Object.keys(item).forEach(keys => {
          if (obj[data.value][keys]) {
            data.data.push({
              label: obj[data.value][keys],
              value: item[keys]
            })
          } 
        })
      }
      Object.keys(item).forEach(key => {
        if (arr[key]) {
          data.data.push({
            label: arr[key],
            value: item[key]
          })
        }
      })
      if (systemArr[data.value]) {
        data.data.push({
          type: 'system',
          value: systemArr[data.value]
        })
      }
    },
    handleNodeClick(e) {
      if (e.level === 1) return
      const coverArr = ['MAINSPOWER', 'SUNPOWER', 'STORAGEPOWER', 'AIRSOURCE', 'SHALLOWLAND', 'FUELBOILER', 'STORAGEHEAT', 'MUNICIPALHEAT']
      if (coverArr.includes(e.value)) {
        this.className = e.value
      } else {
        this.className = null
      }
      this.data = e.data
    }
  }
};
</script>

<style lang="less" scoped>
.home-container {
  background: url(~static/images/home1.png);
  height: calc(100vh - 60px);
  background-size: 100% 100%;
  position: relative;
  // ['MAINS', 'SUN', 'STORAGE', 'AIRSOURCE', 'SHALLOWLAND', 'FUELBOILER', 'STORAGEHEAT', 'MUNICIPALHEAT']
  &.noImgBg {
    background: #2f7ef7;
  }
  .img-container {
    display: inline-block;
    position: absolute;
    top: 50px;
    left: 350px;
  }
  .left-container {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 250px;
    max-height: calc(100vh - 60px - 100px);
    overflow-y: auto;
    background: #2e647c;
    z-index: 99;
    .el-tree /deep/ .el-tree-node .el-tree-node__content {
      height: 43px;
      background: #2c5c78;
      margin: 1px 0;
      color: #007d39;
      color: #fff !important;
    }
    .el-tree /deep/ .is-current > .el-tree-node__content {
      background: #2d5f8b !important;
      color: #fff !important;
    }
  }
  .main-container {
    right: 50px;
    bottom: 50px;
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    border: 1px solid #fff;
    color: #fff;
    padding: 20px;
    box-sizing: border-box;
    .main-item {
      margin-bottom: 10px;
      overflow-y: auto;
      .system {
        margin-bottom: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>